// import { get } from 'lodash'
import { getStorage, setStorage } from '../../utils'
const isDark = Boolean(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)

export default {
  namespaced: true,
  state: {
    // 当前主题内容
    themeName: isDark ? 'dark' : 'light'
  },
  actions: {
    /**
     * @description 激活一个主题
     * @param {String} themeName 需要激活的主题名称
     */
    async SET({ state, commit }, themeName) {
      // 检查这个主题在主题列表里是否存在
      state.themeName = themeName
      // 将 vuex 中的主题应用到 dom
      commit('dom')
      // 持久化
      setStorage('themeName', themeName)
    },
    /**
     * @description 从持久化数据加载主题设置
     * @param {Object} context
     */
    async GET({ state, commit }) {
      // store 赋值
      const themeName = getStorage('themeName') || (isDark ? 'dark' : 'light')
      state.themeName = themeName
      // 将 vuex 中的主题应用到 dom
      commit('dom')
    }
  },
  mutations: {
    /**
     * @description 将 vuex 中的主题应用到 dom
     * @param {Object} state state
     */
    dom(state) {
      document.body.className = `theme-${state.themeName}`
    }
  }
}
